<template>
  <el-dialog
    title="选择图标"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="Element官网图标" name="1">
        <div v-for="(item, index) in icons" :key="item.id" class="select-icon">
          <i
            :class="currentClass(index, item.icon)"
            @click="select(index)"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="自定义" name="2">
      </el-tab-pane>
    </el-tabs>

    <br>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="page.pageSize"
      :total="pagination.total"
      @current-change="pageNumChange"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitSelect">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getAction } from '@/util/request'
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: '1',
      icons: [],
      selected: '',
      currentIndex: -1,
      page: {
        pageNum: 1,
        pageSize: 75
      },
      pagination: {
        total: 0
      }
    }
  },
  methods: {
    close() {
      this.selected = ''
      this.currentIndex = -1
    },
    closeDialog() {
      this.dialogVisible = false
    },
    handleClick(tab, event) {
      console.log(tab, event)
      console.log(tab.name)
      if (tab.name === '1') {
        this.page.pageNum = 1
        this.init()
      }
      if (tab.name === '2') {
        this.icons = []
        this.pagination.total = 0
      }
    },
    select(index) {
      this.currentIndex = index
      this.selected = this.icons[index].icon
      this.$message({
        message: '选中 ' + this.selected,
        type: 'success'
      })
    },
    currentClass(index, item) {
      return [this.currentIndex === index ? 'select-icon-active ' + item : item]
    },
    submitSelect() {
      if (this.selected !== '') {
        this.$emit('getSelectValue', this.selected)
        this.dialogVisible = false
      } else {
        this.$message({
          message: '请选择图标!',
          type: 'warning'
        })
      }
    },
    pageNumChange(index) {
      this.page.pageNum = index
      this.init()
      this.selected = ''
      this.currentIndex = -1
    },
    init() {
      getAction('/sys/icon/findList', this.page).then(res => {
        this.icons = res.data.list
        this.pagination.total = res.data.total
      })
    }
  },
  created() {
    this.init()
  }
}
</script>
<style>
  .select-icon {
    font-size: 35px;
    float: left;
  }
  .select-icon i {
    margin: 5px;
    width: 41px;
    height: 41px;
    border: 1px solid #EEEEEE;
    text-align: center;
    line-height: 41px;
    cursor: pointer;
    font-size: 35px !important;
  }
  .select-icon:hover i {
    color: #409EFF;
  }
  .select-icon-active {
    color: #409EFF;
  }
</style>
